import {memo, useState} from 'react';
import {FlatList, Modal, TouchableOpacity, View} from 'react-native';
import {Img, ModalDir, ObserverText, ObserverView} from '../../components';
import {getConStatus, getSumChap} from '../../utils';
import {dpw12, dpw145, dpw16, dpw24, dpw4, dpw8, dpw80} from '../../constants';

interface ChapItem {
  ChapterTitle: string;
  CoverUrl: string;
  FreeFlag: boolean;
  HasPurchase: boolean;
  Id: number;
  InsertTime: string;
  Points: number;
  VipFree: boolean;
}

const ChapterList = (props: any) => {
  const {
    list,
    total,
    Status,
    Type,
    ChapterCount,
    Author,
    Title,
    bId,
    goDetail,
    onEndReached,
  } = props;
  const [visible, setVisible] = useState(false);

  const _randItem = ({item, index}: {item: ChapItem; index: number}) => {
    return (
      <TouchableOpacity
        style={{marginLeft: index === 0 ? dpw16 : dpw12}}
        onPress={() => {
          if (goDetail) {
            goDetail(item?.Id);
          }
        }}>
        <Img style={{width: dpw145, height: dpw80}} url={item.CoverUrl} />
        <ObserverText
          tKey={`${item.ChapterTitle}`.split('-')[0]}
          numberOfLines={1}
          ellipsizeMode="tail"
        />
      </TouchableOpacity>
    );
  };

  return (
    <>
      <View style={{marginHorizontal: dpw16}}>
        <ObserverText tKey="comicCatalogue" type="head" />
        <View
          style={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
          }}>
          <View style={{flexDirection: 'row', alignItems: 'center'}}>
            <ObserverText
              tKey="author"
              tOptions={{author: Author}}
              type="desc"
              numberOfLines={1}
              ellipsizeMode="tail"
            />
            <ObserverText
              style={{marginLeft: dpw8}}
              tKey={getConStatus(Type)}
              type="desc"
            />
            <ObserverText
              style={{marginLeft: dpw8, marginRight: dpw4}}
              tKey="|"
              type="desc"
            />
            <ObserverText
              tKey={getSumChap(Type)}
              tOptions={{num: ChapterCount}}
              type="desc"
            />
          </View>
          <TouchableOpacity
            style={{marginLeft: dpw24}}
            onPress={() => {
              setVisible(true);
            }}>
            <ObserverText tKey="expandDirectory" type="more" />
          </TouchableOpacity>
        </View>
      </View>
      <View style={{marginBottom: dpw12, marginTop: dpw8}}>
        <FlatList
          data={list.slice(0, 5)}
          horizontal={true}
          keyExtractor={item => `${item.Id}`}
          renderItem={_randItem}
          showsHorizontalScrollIndicator={false}
        />
      </View>
      <ObserverView
        style={{height: dpw12}}
        themeStyle={{backgroundColor: 'color_12'}}
      />
      <Modal visible={visible} animationType="slide" transparent>
        <ModalDir
          Author={Author}
          ChapterCount={ChapterCount}
          Type={Type}
          Title={Title}
          list={list}
          bId={bId}
          goDetail={goDetail}
          onEndReached={onEndReached}
          onClose={() => {
            setVisible(false);
          }}
        />
      </Modal>
    </>
  );
};

export default memo(ChapterList);
